import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    Button
} from 'react-native';

import { Toast, Overlay, Label } from 'teaset';

const Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

import FontAwesome from 'react-native-vector-icons/FontAwesome'
import Icon from 'react-native-vector-icons/Ionicons'
import Input from '../../../node_modules/antd-mobile-rn/lib/input-item/Input.native';

class B extends Component {

    constructor(props) {
        super(props);
        this.params = props.navigation.state.params;
        this.overlayView = null;
        // alert(this.params.id);

        this.state = {
            pwd: '123456',
            a: '11',
            b: '22',
            c: '33',
            d: '44',
            e: '55',
            f: '66'
        }
    }

    componentWillReceiveProps(curProps) {
        this.params = curProps.navigation.state.params;
        // alert(this.params.id);
    }



    showInputPwd() {

        let overlayView = (
            <Overlay.PullView
                style={{ alignItems: 'center', justifyContent: 'center' }}
                modal={true}
                overlayOpacity={0}
                ref={v => this.overlayView = v}
            >

                <View style={{ backgroundColor: '#fff', width: width, height: 380, justifyContent: 'center', alignItems: 'center' }}>


                    <View style={{ height: 50, width: width, flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#999', justifyContent: 'center' }}>
                        <TouchableOpacity
                            style={{ width: 50, height: 50, flexDirection: 'row' }}
                            onPress={() => this.overlayView && this.overlayView.close()}
                        >
                            <View style={{ width: 50, height: 50, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Icon style={{ fontSize: 30, color: '#333' }} name={'ios-close'} />
                                {/* <Image source={require('../../assets/common_ezhifu_cancel.png')} /> */}
                            </View>

                        </TouchableOpacity>

                        <View style={{ flex: 1, height: 50, justifyContent: 'center', textAlign: 'center', alignItems: 'center' }}>
                            <Text>请输入支付密码</Text>
                        </View>
                    </View>

                    <View style={{ height: 50, width: width, backgroundColor: '#F7F7F7', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: 'red' }}>支付金额:4.00元</Text>
                    </View>


                    <View style={{ height: 50, width: width, backgroundColor: '#F7F7F7', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>

                        <View style={{ height: 50, width: 304, borderColor: '#e4e4e4', borderWidth: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>


                            <View style={{ borderColor: '#d4d4d4', borderRightWidth: 1, width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.a}</Text>
                            </View>
                            <View style={{ borderColor: '#d4d4d4', borderRightWidth: 1, width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.b}</Text>
                            </View>
                            <View style={{ borderColor: '#d4d4d4', borderRightWidth: 1, width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.c}</Text>
                            </View>
                            <View style={{ borderColor: '#d4d4d4', borderRightWidth: 1, width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.d}</Text>
                            </View>
                            <View style={{ borderColor: '#d4d4d4', borderRightWidth: 1, width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.e}</Text>
                            </View>
                            <View style={{ width: 50, height: 49, justifyContent: 'center', alignItems: 'center' }}>
                                <Text>{this.state.f}</Text>
                            </View>


                        </View>

                    </View>

                    <View style={{ height: 30, width: width, backgroundColor: '#F7F7F7', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: 'red' }}>忘记密码</Text>
                    </View>

                    <View style={{
                        width: width, flexDirection: 'row', flex: 1, backgroundColor: "#f7f7f7", flexDirection: 'row',
                        flexWrap: 'wrap',
                        alignItems: 'center'
                    }}>
                        <TouchableOpacity
                            onPress={(() => {

                                
                                this.setState({
                                    a: "234567"
                                })
                                ///console.log(this.state.a)
                                alert(this.state.a);
                            }).bind(this)}
                        >
                            <View style={[styles.each_num]}>
                                <Text>1</Text>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            onPress={() => {

                                this.setState({
                                    b: "2"
                                })
                            }}
                        >
                            <View style={[styles.each_num]}>
                                <Text>2</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>3</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>4</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>5</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>6</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>7</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>8</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>9</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text></Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>0</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <View style={[styles.each_num]}>
                                <Text>delete</Text>
                            </View>
                        </TouchableOpacity>
                    </View>

                </View>





            </Overlay.PullView>
        );
        Overlay.show(overlayView);

    }

    render() {
        // alert('render two')
        return (
            <View style={{ flex: 1 }}>
                <Text>{this.state.a}</Text>
                <TouchableOpacity
                    onPress={() => {
                        this.props.navigation.navigate("A");
                    }}
                    style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}
                >
                    <Text style={{ fontSize: 30, color: 'red' }}>返回A</Text>

                </TouchableOpacity>
                
                <TouchableOpacity
                    onPress={() => {
                        this.showInputPwd()
                    }}
                    style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}
                >
                    <Text style={{ fontSize: 30, color: 'red' }}>支付上拉弹层</Text>

                </TouchableOpacity>

            </View>
        )
    }


}


const styles = StyleSheet.create({
    navigatorBar: {
        backgroundColor: '#BFBFBF'
    },
    each_num: {
        width: (width - 3) / 3,
        height: 50,
        backgroundColor: 'white',
        justifyContent: "center",
        alignItems: 'center',
        marginLeft: 1,
        marginBottom: 1,
        fontSize: 20
    }

});

export default B;